<template>
	<view class="container padding-lr">
		<view class="aprTitBox flex" :class="{ shaw: navShaw }">
			<view v-for="(item, index) in navList" :key="index" :class="{ active: index === navClass }" class="titItem" @click="tapNav(index)">{{ item.name }}</view>
		</view>
		<view class="margin-top mianmtips flex align-center text-c6 text-sm">
			<view class="flex-sub flex align-center padding-left">
				<image class="timg" src="../../../static/keyico1.png" mode="aspectFill"></image>
				<text class="margin-left-xs">套餐卡免密支付已开通</text>
			</view>
			<view class="flex align-center padding-lr">
				去设置
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<block v-for="(item, index) in navList" :key="index">
			<view v-if="navClass == index" class="padding-top-sm">
				<view v-for="(citem, cindex) in 5" :key="cindex" class="listItem" :class="{ gry: cindex == 1 }">
					<view class="min_qiu fixbox"></view>
					<view class="max_qiu fixbox"></view>
					<view class="mconbox">
						<view class="flex align-center padding-lr">
							<view class="ca_tit text-bold flex-sub text-cuts">经络SPA套餐卡2次</view>
							<view class="ca_staut text-ngreen">{{ cindex != 1 ? '可使用' : '已过期' }}</view>
						</view>
						<view class="camainMsg text-c6 text-sm padding-lr">
							<view class="ca_dis flex">
								<view class="flex-sub cdtext">使用说明：本套餐仅限隆平园店使用使用说明：本套餐仅限隆平园店 使用使用说明：本套餐仅限隆平园店使用</view>
								<view class="text-ngreen moredis padding-left-xs">查看更多</view>
							</view>
							<view class="margin-top-xs">有效期至：2022-11-30</view>
							<view class="margin-top-xs flex align-center">
								<view class="flex-sub">手机号：18073533542</view>
								<view class="text-c3 text-bold surnums text-df">剩余次数1</view>
							</view>
						</view>
						<view v-if="cindex != 1" class="cbot_btn margin-top-sm padding-top-sm flex align-center text-ngreen">
							<view class="flex-sub padding-left"><view class="actBtn d_ib">赠送</view></view>
							<view class="">
								<view class="d_ib padding-lr">修改密码</view>
								|
								<view class="d_ib padding-lr">解绑</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<!-- <view class="full_btn nfixed margin-top-sm">去购买</view> -->
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { onPageScroll } from '@dcloudio/uni-app';
	const navShaw=ref(false)
	const	navClass=ref(0)
	const	navList=ref([
		{
			id: '0',
			bill_status: '',
			name: '可使用',
			loaded: false,
			curPage: 1,
			list: [],
			isEmpty: false,
			loadingType: 'none'
		},
		{
			id: '1',
			bill_status: '813',
			name: '已使用',
			loaded: false,
			curPage: 1,
			list: [],
			isEmpty: false,
			loadingType: 'none'
		},
		{
			id: '2',
			bill_status: '987',
			name: '已赠送',
			loaded: false,
			curPage: 1,
			list: [],
			isEmpty: false,
			loadingType: 'none'
		},
		{
			id: '3',
			bill_status: '988',
			name: '已过期',
			loaded: false,
			curPage: 1,
			list: [],
			isEmpty: false,
			loadingType: 'none'
		}
	]) 
	onPageScroll((e)=>{
		e.scrollTop > 10 ? (navShaw.value = true) : (navShaw.value = false);
	})
		const tapNav=(index:any)=> {
			navClass.value = index;
	}
</script>

<style lang="scss">
.container {
	padding-top: 80rpx;
	padding-bottom: 30rpx;
	// padding-bottom: 160rpx;
}
.mianmtips {
	width: 100%;
	height: 50rpx;
	background: #eff5ee;
	border-radius: 50rpx;
}
.aprTitBox {
	height: 80rpx;
	line-height: 81rpx;
	font-size: 28rpx;
	// padding: 6rpx 20rpx 0 20rpx;
	text-align: center;
	position: fixed;
	left: 0;
	top: 0;
	padding-bottom: 3rpx;
	width: 100vw;
	background: #fafafa;
	z-index: 9;
	&.shaw {
		box-shadow: 0px 4rpx 18rpx rgba(0, 0, 0, 0.08);
	}
	.titItem {
		width: 154rpx;
		height: 100%;
		position: relative;
		transition: all 0.03s linear;
		&.active {
			// font-size: 36rpx;
			color: #56bf7a;
			&::before {
				content: '';
				width: 44rpx;
				height: 6rpx;
				position: absolute;
				left: 50%;
				bottom: 2rpx;
				border-radius: 6rpx;
				margin-left: -22rpx;
				background: #56bf7a;
			}
		}
	}
}
.timg {
	width: 28rpx;
	height: 28rpx;
}
.listItem {
	width: 100%;
	min-height: 386rpx;
	border-radius: 16rpx;
	background: #eff5ee;
	position: relative;
	overflow: hidden;
	margin-bottom: 30rpx;
	&.gry {
		background: #f5f5f5;
		.fixbox {
			background: #eeeeee;
		}
		.ca_staut,
		.ca_tit,
		.camainMsg,
		.moredis,
		.surnums {
			color: #999;
		}
	}
	.mconbox {
		position: relative;
		z-index: 3;
		padding-bottom: 20rpx;
		padding-top: 40rpx;
	}
	.min_qiu {
		width: 334rpx;
		height: 334rpx;
		right: -160rpx;
		bottom: -168rpx;
	}
	.max_qiu {
		width: 508rpx;
		height: 508rpx;
		left: -48rpx;
		top: -324rpx;
	}
	.fixbox {
		position: absolute;
		z-index: 1;
		background: #dff1db;
		border-radius: 50%;
	}
	.ca_tit {
		font-size: 40rpx;
	}
}
.camainMsg {
	padding-top: 60rpx;
}
.moredis {
	margin-right: 120rpx;
}
.cdtext {
	overflow: hidden;
	white-space: nowrap;
}
.actBtn {
	@include baseTag(142rpx, 56rpx);
	border-radius: 56rpx;
	border: 1px solid #56bf7a;
}
</style>